<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" th:replace="~{layout :: html}">
<head>
    <title>用户详情 - 用户管理系统</title>
</head>
<body>
    <div th:fragment="content">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">用户详情</h5>
                        <div>
                            <a th:href="@{/user/edit/{id}(id=${user.id})}" class="btn btn-sm btn-warning">
                                <i class="fas fa-edit"></i> 编辑
                            </a>
                            <a th:href="@{/user/list}" class="btn btn-sm btn-secondary">
                                <i class="fas fa-arrow-left"></i> 返回列表
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tbody>
                                        <tr>
                                            <th width="30%" class="text-muted">用户ID：</th>
                                            <td th:text="${user.id}"></td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">用户名：</th>
                                            <td th:text="${user.name}"></td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">邮箱：</th>
                                            <td th:text="${user.email}"></td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">年龄：</th>
                                            <td th:text="${user.age != null ? user.age + ' 岁' : '未填写'}"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tbody>
                                        <tr>
                                            <th width="30%" class="text-muted">电话：</th>
                                            <td th:text="${user.phone != null ? user.phone : '未填写'}"></td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">创建时间：</th>
                                            <td th:text="${#temporals.format(user.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">更新时间：</th>
                                            <td th:text="${user.updateTime != null ? #temporals.format(user.updateTime, 'yyyy-MM-dd HH:mm:ss') : '未更新'}"></td>
                                        </tr>
                                        <tr>
                                            <th class="text-muted">状态：</th>
                                            <td>
                                                <span class="badge bg-success">正常</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 地址信息 -->
                        <div class="row" th:if="${user.address != null && !#strings.isEmpty(user.address)}">
                            <div class="col-12">
                                <hr>
                                <h6 class="text-muted">地址信息</h6>
                                <p th:text="${user.address}" class="text-break"></p>
                            </div>
                        </div>

                        <!-- 备注信息 -->
                        <div class="row" th:if="${user.remark != null && !#strings.isEmpty(user.remark)}">
                            <div class="col-12">
                                <hr>
                                <h6 class="text-muted">备注信息</h6>
                                <p th:text="${user.remark}" class="text-break"></p>
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-center">
                                    <a th:href="@{/user/edit/{id}(id=${user.id})}" class="btn btn-primary me-2">
                                        <i class="fas fa-edit"></i> 编辑用户
                                    </a>
                                    <button type="button" class="btn btn-danger me-2" 
                                            th:onclick="'confirmDelete(' + ${user.id} + ', \'' + ${user.name} + '\')'">
                                        <i class="fas fa-trash"></i> 删除用户
                                    </button>
                                    <a th:href="@{/user/list}" class="btn btn-outline-secondary">
                                        <i class="fas fa-list"></i> 返回列表
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:fragment="scripts">
        // 确认删除用户
        function confirmDelete(userId, userName) {
            if (confirm('确定要删除用户 "' + userName + '" 吗？')) {
                window.location.href = '/user/delete/' + userId;
            }
        }
    </script>
</body>
</html>
